<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>黑马面面</title>
    <!-- 引入swiper,放在自己的上面 -->
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/normalize copy.css">
  <link rel="stylesheet" href="./css/index.css">


</head>
<body>
  <!-- 整个上部分的制作 -->
  <div class="wrap">
    <!-- 头部区域 -->
<div class="header">
黑马面面
</div>  
<!-- nav部分 -->
<div class="nav">
  <a href="#" class="item"><img src="./icons/icon1.png" alt="">HR面试</a>
  <a href="#" class="item"><img src="./icons/icon2.png" alt="">笔试</a>
  <a href="#" class="item"><img src="./icons/icon3.png" alt="">技术面试</a>
  <a href="#" class="item"><img src="./icons/icon4.png" alt="">模拟面试</a>
  <a href="#" class="item"><img src="./icons/icon5.png" alt="">面试技巧</a>
  <a href="#" class="item"><img src="./icons/icon6.png" alt="">薪资查询</a>


</div>
<div class="go">
  <img src="./images/go.png" alt="">
</div>
  </div>
  <!-- 就业指导模块 -->

  <div class="content">
    <!-- 头部区域 -->
    <div class="content-hd">
      <div class="hd-l"><span class="pic"><img src="./icons/i1.png" alt=""></span><h4>就业指导</h4></div>
      <div class="hd-r"><a href="">更多>></a></div>
    </div>
    <!-- 因为有好多都要用这个轮播图所以用大的盒子把它包起来 -->
     <div class="get_job_focus">
            <!-- Swiper -->
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <a href="#"><img src="./images/pic.png" alt="" /></a>
                  <p>老师教你应对面试技巧</p>
                </div>
                <div class="swiper-slide">
                  <a href="#"><img src="./images/ldh.jpg" alt="" /></a>
                  <p>老师教你应对面试技巧</p>
                </div>
                <div class="swiper-slide">
                  <a href="#"><img src="./images/3.jpg" alt="" /></a>
                  <p>老师教你应对面试技巧</p>
                </div>
                <div class="swiper-slide">
                  <a href="#"><img src="./images/3.jpg" alt="" /></a>
                  <p>老师教你应对面试技巧</p>
                </div>
              </div>
            </div>
            <!-- Add Arrows 根据需求这个代码放到 container外面 添加左右箭头-->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
    </div>

    </div>


    <!-- 充电学习模块 -->
    <div class="content study_cn">
      <!-- 头部区域 -->
      <div class="content-hd">
        <div class="hd-l">
          <span class="pic"><img src="./icons/i2.png" alt=""></span>
          <h4>充电学习</h4>
        </div>
        <div class="hd-r"><a href="">更多>></a></div>
      </div>
      <!-- 因为有好多都要用这个轮播图所以用大的盒子把它包起来 -->
      <div class="study">
        <!-- Swiper -->
        <div class="swiper-study">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
             <img src="./images/pic1.png" alt="">
             <h3>说地道英语，告别中式英语</h3>
             <i>155人</i>正在学习
            </div>
            <div class="swiper-slide"><img src="./images/pic1.png" alt="">
            <h3>说地道英语，告别中式英语</h3>
            <i>155人</i>正在学习</div>
            <div class="swiper-slide"><img src="./images/pic2.png" alt="">
            <h3>说地道英语，告别中式英语</h3>
            <i>155人</i>正在学习</div>
            <div class="swiper-slide"><img src="./images/pic1.png" alt="">
            <h3>说地道英语，告别中式英语</h3>
            <i>155人</i>正在学习</div>
          </div>
      </div>
      </div>
      <div class="footer">
        <a href="#" class="item"><img src="./icons/home.png" alt="">
        <p>首页</p></a>
        <a href="#"  class="item"><img src="./icons/net.png" alt="">
        <p>模拟面试</p></a>
        <a href="#" class="item"><img src="./icons/user.png" alt="">
        <p>技术面试</p></a>
        <a href="#" class="item"><img src="./icons/arr.png" alt="">
        <p>我的首页</p></a>
      </div>
  <script src="./js/swiper.min.js"></script>
  <script src="./js/newjs.js"></script>
  <script src="./js/flexible.js"></script>

    <!-- Swiper JS -->
  <script>
    // 初始化
    // 第一个函数里面是我们的第一个就业指导轮播图
   (function(){
     var swiper = new Swiper('.swiper-container', {
      // 能够显示的个数是几个，0.5+0.5+1
       slidesPerView: 2,
      //  每个盒子之间的距离
       spaceBetween: 30,
      //  当前最大的放在中间显示
       centeredSlides: true,
       loop: true,
      //  分页器其实就是小圆点
       // pagination: {
       //   el: '.swiper-pagination',
       //   clickable: true,
       // },
       navigation: {
         nextEl: ".swiper-button-next",
         prevEl: ".swiper-button-prev",
       }
     });
   })()
   </script>
   <!-- 要单独写一个把这个包住哦 -->
   <script>
     (function(){
         var swiper = new Swiper(".swiper-study", {
       slidesPerView: 2.2,
       spaceBetween: 30,
      //  pagination: {
      //    el: ".swiper-pagination",
      //    clickable: true,
      //  },
     });
    })()
   </script>
  
  
</body>
</html>